<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
        @on-delete="handleDelete" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
    </Card>
    <Modal v-model="visible" :title="title" :mask-closable="false" @on-ok="okModal" @on-cancel="cancelModal" width="80%"
      cancelText=" " okText="关闭">
      <strong>销售明细备注：机器时间，是出货时机器记录的时间；上传服务器时间，是指交易数据到达服务器的时间。有可能机器时间和服务器时间存在时间差，是因为机器时间不准确导致的。</strong>
      <Row>
        <br>
        <Col span="6">
          <strong style="font-size:15px;">机器编号：{{machineNum}}</strong>
        </Col>
        <Col span="6">
          <strong style="font-size:15px;">机器名：{{machineName}}</strong>
        </Col>
        <Col span="6">
          <strong style="font-size:15px;">现金收款金额：{{cashCollectionAmount}}</strong>
        </Col>
        <Col span="6">
          <strong style="font-size:15px;">找零金额：{{changeAmount}}</strong>
        </Col>
      </Row>
      <Row>
        <Col span="6">
          <strong style="font-size:15px;">销售金额：{{saleAmount}}</strong>
        </Col>
        <Col span="6">
          <strong style="font-size:15px;">销售数量：{{saleCount}}</strong>
        </Col>
        <Col span="6">
          <strong style="font-size:15px;">部署地址：{{deployAddress}}</strong>
        </Col>
        <!-- <Col span="6">
          <strong style="font-size:15px;">管理员：{{administrator}}</strong>
        </Col> -->
      </Row>
      <br>
      <Tabs>
        <TabPane label="交易流水" name="交易流水">
          <tables ref="streamTable" v-model="streamTableData" :columns="streamColumns" />
        </TabPane>
        <TabPane label="销售汇总统计" name="销售汇总统计">
          <tables ref="streamTable" v-model="saleSummaryTableData" :columns="saleSummaryColumns" />
        </TabPane>
        <TabPane label="出货记录" name="出货记录">
          <tables ref="streamTable" v-model="shipRecordTableData" :columns="shipRecordColumns" />
        </TabPane>
        <TabPane label="门开关流水" name="门开关流水">
          <tables ref="streamTable" v-model="doorSwitchTableData" :columns="doorSwitchColumns" />
        </TabPane>
        <TabPane label="补货记录" name="补货记录">
          <tables ref="streamTable" v-model="replenishmentRecordTableData" :columns="replenishmentRecordColumns" />
        </TabPane>
        <!-- <TabPane label="应收金额" name="应收金额">
          <tables ref="streamTable" v-model="receivableAmountTableData" :columns="receivableAmountColumns" />
        </TabPane> -->
      </Tabs>
    </Modal>
  </div>
</template>

<script>
import Mock from 'mockjs'
import Tables from '_c/tables'
import {
  machineNumberValues,
  machineGroupNameValues,
  networkStates,
  paymentTypes,
  commoditys,
  doorStates,
  payStatusValues,
} from '@/mock/data/option-data.js'
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'
import moment from 'moment'

export default {
  name: 'discount_code_statis_page',
  components: {
    Tables
  },
  data() {
    return {
      pay_date: moment().format('YYYY-MM-DD'),
      columns: [
        { title: '机器组名', key: 'machineGroupName' },
        { title: '机器名', key: 'machineName' },
        { title: '箱体编号', key: 'carbodyID' },
        { 
          title: '网络状态', 
          key: 'networkState',
          render: (h, params) => h('div', networkStates[params.row.networkState])
        },
        { title: '温度(­°C)', key: 'temperature' },
        // { title: '支付类型', key: 'paymentType' },
        { title: '销售金额', key: 'saleAmount' },
        { title: '销售数量', key: 'saleCount' },
        { title: '零钱消耗', key: 'changeConsume' },
        { title: '出货失败金额', key: 'shipFailAmount' },
        { title: '出货失败数量', key: 'shipFailCount' },
        { title: '现金收款金额', key: 'cashCollectionAmount' },
        { title: '找零金额', key: 'changeAmount' },
        // { title: '收纸币金额', key: 'noteAmount' },
        // { title: '收硬币金额', key: 'coinAmount' },
        // { title: '纸币找零金额', key: 'noteChangeAmount' },
        // { title: '当前硬币金额', key: 'currentCoinAmount' },
        { title: '时间', key: 'datetime' },
        { title: '部署地址', key: 'deployAddress' },
        // { title: '管理员', key: 'administrator' },
        {
          title: '操作',
          key: 'action',
          width: 150,
          render: (h, params) => {
            return h('div', [
              // h('Button', {
              //   props: {
              //     type: 'warning',
              //     size: 'small',
              //     ghost: true,
              //   },
              //   on: {
              //     click: () => this.tableData.splice(params.index, 1)
              //   },
              // }, '删除'),
              // h('span', {}, ' '),
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: async () => {
                    this.title = '查询明细';
                    this.machineNum = Mock.mock({ 'machineNum|1': machineNumberValues }).machineNum;
                    this.machineName = params.row.machineName;
                    this.cashCollectionAmount = params.row.cashCollectionAmount;
                    this.changeAmount = params.row.changeAmount;
                    this.saleAmount = params.row.saleAmount;
                    this.saleCount = params.row.saleCount;
                    this.deployAddress = params.row.deployAddress;
                    this.administrator = params.row.administrator;
                    this.visible = true;
                    // 交易流水
                    const { data: { data: streamTableData } } = await rcRequest({
                      method: 'post',
                      url: '/pay/select_machine_the_day_pay_info',
                      data: {
                        pay_date: this.pay_date,
                        machine_id: params.row.machineNum,
                      },
                    });
                    this.streamTableData = streamTableData.map(item => ({
                      freightWay: item.aisle_name,
                      commodityName: item.product_name,
                      paymentType: item.pay_type_name,
                      unitPrice: item.unit_price,
                      result: payStatusValues[item.pay_status],
                      machineDate: item.expire_time,
                      serviceDate: item.expire_time,
                      coinAmount: item.pay_fee,
                      needRefundAmount: item.change_cash,
                      actualRefundAmount: item.change_cash,
                      amountDate: item.create_time,
                    }));
                    // 销售汇总统计
                    const { data: { data: saleSummaryTableData } } = await rcRequest({
                      method: 'post',
                      url: '/pay/select_machine_the_day_pay_all_info',
                      data: {
                        pay_date: this.pay_date,
                        machine_id: params.row.machineNum,
                      }
                    });
                    this.saleSummaryTableData = saleSummaryTableData.map(item => ({
                      commodityName: item.product_name,
                      saleAmount: item.sales_amount,
                      saleCount: item.sales_number,
                    }))
                    // 出货记录
                    const { data: { data: shipRecordTableData } } = await rcRequest({
                      method: 'post',
                      url: '/pay/select_machine_the_day_pay_shipping_record_info',
                      data: {
                        pay_date: this.pay_date,
                        machine_id: params.row.machineNum,
                      },
                    });
                    this.shipRecordTableData = shipRecordTableData.map(item => ({
                      freightWay: item.aisle_name,
                      paymentType: item.pay_type_name,
                      commodityName: item.product_name,
                      unitPrice: item.unit_price,
                      result: payStatusValues[item.pay_status],
                      machineDate: item.change_cash,
                      serviceDate: item.create_time,
                    }))
                    // 开关门流水
                    const { data: { data: doorSwitchTableData } } = await rcRequest({
                      method: 'post',
                      url: '/pay/select_machine_openrecord_info',
                      data: {
                        pay_date: this.pay_date,
                        machine_id: params.row.machineNum,
                      },
                    });
                    this.doorSwitchTableData = doorSwitchTableData.map(item => ({
                      machineNum: item.machine_number,
                      machineName: item.machine_name,
                      state: doorStates[item.status],
                      datetime: item.status_time,
                    }))
                    // 补货记录
                    const { data: { data: replenishmentRecordTableData } } = await rcRequest({
                      method: 'post',
                      url: '/replenishmentdetails/select_machine_replenishment_record_info',
                      data: {
                        pay_date: this.pay_date,
                        machine_id: params.row.machineNum,
                      },
                    });
                    this.replenishmentRecordTableData = replenishmentRecordTableData.map(item => ({
                      commodityName: item.product_name,
                      replenishmentCount: item.amount,
                      datetime: item.replenishment_time,
                    }))
                    // 应收金额
                    this.receivableAmountTableData = Mock.mock({
                      'list|5-10': [{
                        'receivableAmount|0-100.2': 1,
                        'createDate': '@datetime()',
                        'endDate': '@datetime()',
                      }]
                    }).list;
                  }
                },
              }, '查询明细'),
            ]);
          }
        }
      ],
      tableData: [],
      // 查询明细
      title: '查询明细',
      visible: false,
      machineNum: '',
      machineName: '',
      cashCollectionAmount: '',
      changeAmount: '',
      saleAmount: '',
      saleCount: '',
      deployAddress: '',
      administrator: '',
      // 交易流水
      streamColumns: [
        { title: '货道', key: 'freightWay' },
        { title: '商品名称', key: 'commodityName' },
        { title: '支付类型', key: 'paymentType' },
        { title: '单价', key: 'unitPrice' },
        { title: '结果', key: 'result' },
        { title: '机器时间', key: 'machineDate' },
        { title: '服务器时间', key: 'serviceDate' },
        { title: '支付金额', key: 'coinAmount' },
        // { title: '需退金额', key: 'needRefundAmount' },
        { title: '找零金额', key: 'actualRefundAmount' },
        { title: '时间', key: 'amountDate' },
      ],
      streamTableData: [],
      // 销售汇总统计
      saleSummaryColumns: [
        { title: '商品名称', key: 'commodityName' },
        { title: '销售金额', key: 'saleAmount' },
        { title: '销售数量', key: 'saleCount' },
      ],
      saleSummaryTableData: [],
      // 出货记录
      shipRecordColumns: [
        { title: '货道', key: 'freightWay' },
        { title: '支付类型', key: 'paymentType' },
        { title: '商品名称', key: 'commodityName' },
        { title: '单价', key: 'unitPrice' },
        { title: '结果', key: 'result' },
        { title: '机器时间', key: 'machineDate' },
        { title: '服务器时间', key: 'serviceDate' },
      ],
      shipRecordTableData: [],
      // 门开关流水
      doorSwitchColumns: [
        { title: '机器编号', key: 'machineNum' },
        { title: '机器名', key: 'machineName' },
        { title: '状态', key: 'state' },
        { title: '时间', key: 'datetime' },
      ],
      doorSwitchTableData: [],
      // 补货记录
      replenishmentRecordColumns: [
        { title: '商品名称', key: 'commodityName' },
        { title: '补货数量', key: 'replenishmentCount' },
        { title: '时间', key: 'datetime' },
      ],
      replenishmentRecordTableData: [],
      // 应收金额
      receivableAmountColumns: [
        { title: '应收金额', key: 'receivableAmount' },
        { title: '创建时间', key: 'createDate' },
        { title: '结束时间', key: 'endDate' },
      ],
      receivableAmountTableData: [],
    }
  },
  methods: {
    handleDelete(params) {
      console.log(params)
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `当日销售监控-${(new Date()).valueOf()}.csv`
      })
    },
    okModal() { },
    cancelModal() { },
    // 获取列表数据
    async getListData() {
      const { data: { data: result } } = await rcRequest({
        method: 'post',
        data: { 
          pay_date: this.pay_date,
        },
        url: '/pay/select_last_week_pay_count',
      });
      this.tableData = result.map(item => ({
        id: item.id,
        machineGroupName: item.machine_group_name,
        machineName: item.name,
        carbodyID: item.bodyID,
        networkState: item.network_status,
        temperature: item.temperature,
        paymentType: item.ptname,
        saleAmount: item.sales_amount * 1,
        saleCount: item.sales_number * 1,
        changeConsume: item.change_cash,
        shipFailAmount: item.shipment_failure_money,
        shipFailCount: item.shipment_failure_number,
        cashCollectionAmount: item.cash_collection_money,
        changeAmount: item.change_cash,
        // noteAmount: item.
        // coinAmount: item.
        // noteChangeAmount: item.
        // currentCoinAmount: item.
        datetime: item.expire_time,
        deployAddress: item.addr,
        administrator: item.administrator_phone,
        machineNum: item.machine_id,
      }));
    },
  },
  mounted() {
    this.getListData();
  }
}
</script>

<style scoped>

</style>
